@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        .el-input__inner {
            border-radius: 0;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 2px;
            background: none;
        }

        .el-radio {
            white-space: normal;
        }

        .el-checkbox__label {
            display: inline-grid;
            word-wrap: break-word;
            line-height: 20px;
            white-space: pre-line;
        }

        .number {
            color: red;
        }

        html {
            background-color: #f1f1f1;
        }
    </style>
    <link href="/sitefiles/assets/css/watermark.css" rel="stylesheet" type="text/css" />
}
@await Html.PartialAsync("_PartialWatermark")
<template v-if="isLoad">
    <div class="d-flex justify-content-between align-items-center px-8 py-3">
        <span><span class="fw-bold fs-4">考试中：{{ paper.title }}<span class="fw-light fs-5">（共：{{ paper.tmTotal }}题，总分：{{ paper.totalScore }}分，及格分：{{ paper.passScore }}分）</span></span></span>
        <div class="d-flex justify-content-between align-items-center">
            <el-avatar size="small" :src="paper.userAvatar || DEFAULT_AVATAR_URL"></el-avatar><span class="ms-2">当前考生：{{ paper.userDisplayName }}</span>
        </div>
    </div>
    <div class="px-8">
        <el-row :gutter="8">
            <el-col :span="18">
                <el-card v-if="tm" class="fs-4">
                    <div slot="header" class="d-flex justify-content-between align-items-center">
                        <div>第<span class="px-1">{{ tm.tmIndex }}</span>题（<span>{{ tm.txName }}</span>）</div>
                        <div><span>{{ tm.score }}分</span></div>
                    </div>
                    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-327) + 'px' }" ref="answerScrollbar">
                        <div class="pe-3">
                            <div v-if="tm.baseTx==='Zuheti'">
                                <div class="mb-3">
                                    <div v-html="tm.titleHtml"></div>
                                </div>
                                <div class="mb-3" v-for="small in tm.smallLists">
                                    <div class="d-flex justify-content-between align-items-center p-3 bg-light">
                                        <div>第<span class="px-1">{{ small.tmIndex }}</span>小题（<span>{{ small.txName }}</span>）</div>
                                        <div><span>{{ small.score }}分</span></div>
                                    </div>
                                    <div class="mb-3 fw-bold">
                                        <div v-if="small.baseTx==='Tiankongti'">
                                            <span v-if="small.titleList && small.titleList.length>0">
                                                <span v-for="tmContent in small.titleList">
                                                    <span v-if="utils.contains(tmContent.value,'___')">
                                                        <el-input v-model.trim="small.answerInfo.optionsValues[tmContent.key]" v-on:change="answerSmallChange(small)" style="width:130px;"></el-input>
                                                    </span>
                                                    <span v-else v-html="tmContent.value"></span>
                                                </span>
                                            </span>
                                            <div v-else v-html="small.titleHtml"></div>
                                        </div>
                                        <div v-else v-html="small.titleHtml"></div>
                                    </div>
                                    <div class="list-group" v-if="small.baseTx!=='Tiankongti'">
                                        <div v-if="small.baseTx==='Danxuanti' || small.baseTx==='Panduanti'">
                                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in small.optionsRandom">
                                                <div class="d-flex justify-content-start align-items-center">
                                                    <div class="me-1 position-relative">
                                                        {{optionsABC[optionIndex]}}
                                                    </div>
                                                    <div class="w-100 pt-1">
                                                        <el-radio class="border-0 w-100" border :label="option.key" v-model="small.answerInfo.answer" v-on:change="answerSmallChange(small)" size="medium">
                                                            <span v-html="option.value"></span>
                                                        </el-radio>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else-if="small.baseTx==='Duoxuanti'">
                                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in small.optionsRandom">
                                                <div class="d-flex justify-content-start align-items-center">
                                                    <div class="me-1 position-relative">
                                                        {{optionsABC[optionIndex]}}
                                                    </div>
                                                    <div class="w-100 pt-1">
                                                        <el-checkbox class="border-0 w-100" border :true-label="option.key" false-label="" v-model="small.answerInfo.optionsValues[optionsABC.indexOf(option.key)]" v-on:change="answerSmallChange(small)" size="medium">
                                                            <span v-html="option.value"></span>
                                                        </el-checkbox>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else-if="small.baseTx==='Jiandati'">
                                            <el-input :key="small.id" type="textarea" resize="none" v-model="small.answerInfo.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                                                      show-word-limit v-on:change="answerSmallChange(small)"></el-input>
                                        </div>
                                        <div v-else>
                                            未知题型
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <div class="mb-3 fw-bold">
                                    <div v-if="tm.baseTx==='Tiankongti'">
                                        <span v-if="tm.titleList && tm.titleList.length>0">
                                            <span v-for="tmContent in tm.titleList">
                                                <span v-if="utils.contains(tmContent.value,'___')">
                                                    <el-input v-model.trim="tm.answerInfo.optionsValues[tmContent.key]" v-on:change="answerChange" style="width:130px;"></el-input>
                                                </span>
                                                <span v-else v-html="tmContent.value"></span>
                                            </span>
                                        </span>
                                        <div v-else v-html="tm.titleHtml"></div>
                                    </div>
                                    <div v-else v-html="tm.titleHtml"></div>
                                </div>
                                <div class="list-group" v-if="tm.baseTx!=='Tiankongti'">
                                    <div v-if="tm.baseTx==='Danxuanti' || tm.baseTx==='Panduanti'">
                                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                                            <div class="d-flex justify-content-start align-items-center">
                                                <div class="me-1 position-relative">
                                                    {{optionsABC[optionIndex]}}
                                                </div>
                                                <div class="w-100 pt-1">
                                                    <el-radio class="border-0 w-100" border :label="option.key" v-model="tm.answerInfo.answer" v-on:change="answerChange" size="medium">
                                                        <span v-html="option.value"></span>
                                                    </el-radio>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else-if="tm.baseTx==='Duoxuanti'">
                                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                                            <div class="d-flex justify-content-start align-items-center">
                                                <div class="me-1 position-relative">
                                                    {{optionsABC[optionIndex]}}
                                                </div>
                                                <div class="w-100 pt-1">
                                                    <el-checkbox class="border-0 w-100" border :true-label="option.key" false-label="" v-model="tm.answerInfo.optionsValues[optionsABC.indexOf(option.key)]" v-on:change="answerChange" size="medium">
                                                        <span v-html="option.value"></span>
                                                    </el-checkbox>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else-if="tm.baseTx==='Jiandati'">
                                        <el-input :key="tm.id" type="textarea" resize="none" v-model="tm.answerInfo.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                                                  show-word-limit v-on:change="answerChange"></el-input>
                                    </div>
                                    <div v-else>
                                        未知题型
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                    <div class="pt-3 text-center">
                        <el-button v-on:click="btnUpClick" icon="el-icon-arrow-left" circle :disabled="tm.tmIndex===1"></el-button>
                        <span class="px-5">{{ tm.tmIndex }}/{{ paper.tmTotal }}</span>
                        <el-button v-on:click="btnDownClick" icon="el-icon-arrow-right" circle :disabled="tm.tmIndex===paper.tmTotal"></el-button>
                    </div>
                </el-card>
                <el-card v-else>
                    <div :style="{ height: ($(window).innerHeight()-209) + 'px' }">
                        <el-skeleton :rows="6" animated>
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                            <el-skeleton-item variant="h3" style="width: 50%;" />
                        </el-skeleton>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">
                        <div class="row">
                            <div class="col">答题卡</div>
                            <div class="col-auto">
                                <el-tag size="mini" type="warning" class="me-1">未答</el-tag>
                                <el-tag size="mini" effect="dark" type="success">已答</el-tag>
                            </div>
                        </div>
                    </div>
                    <div>
                        <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-270) + 'px' }">
                            <ul class="list-group mb-1" v-for="(tx,txIndex) in list">
                                <li class="list-group-item border-0 p-1 fw-light">{{tx.txName}}</li>
                                <li class="list-group-item border-0 p-1">
                                    <span v-for="tabTm in tx.tmList" v-on:click="btnGetTm(tabTm.id)" style="margin-right:3px; margin-bottom:3px;cursor:pointer;">
                                        <el-tag :key="tabTm.id" size="mini" type="success" effect="dark" v-if="getTmAnswerStatus(tabTm.id)">
                                            {{ tabTm.tmIndex }}
                                        </el-tag>
                                        <el-tag :key="tabTm.id" size="mini" type="warning" v-else>
                                            {{ tabTm.tmIndex }}
                                        </el-tag>
                                    </span>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div class="d-flex justify-content-between align-items-center px-8 py-3">
        <div>
            <div v-if="paper.isTiming">
                <el-statistic :value="surplusSecond"
                              time-indices v-on:finish="timingFinish"
                              suffix="后自动交卷">
                </el-statistic>
            </div>
            <div v-else>
                不计时考试
            </div>
        </div>
        <div style="min-width:300px;">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="utils.formatPercentFloat(answerTotal,paper.tmTotal)" status="success"></el-progress>
        </div>
        <div>
            <el-button class="btn btn-outline-primary py-3 border-0 bg-transparent" v-if="paper.openExist" v-on:click="utils.closeLayerSelf" icon="el-icon-close">退出考试</el-button>
            <el-button type="primary" class="py-3" v-on:click="btnPaperSubmit">
                <i class="el-icon-upload me-2"></i>立即交卷
            </el-button>
        </div>
    </div>
</template>
@section Scripts{
    <script src="/sitefiles/assets/js/home/exam/examPaperExaming.js" type="text/javascript"></script>
}